<template>
  <el-main class="basic-config">
    <div class="basic-config-title">
          资金管理
    </div>
    <div class="basic-body sa-m-t-18">
      <div class="body-title sa-p-t-18">鲸囍生活</div>
      <div class="body-h2 sa-p-t-18 sa-flex">账户余额(元)
        <el-button type="text" class="sa-m-l-20">提现</el-button>
      </div>
      <div class="body-h3 sa-p-t-18">
        <div class="body-item sa-flex">
            <span class="item-text">￥</span>
            0.00
        </div>
        <!-- <div class="body-btn sa-flex">提现</div> -->
      </div>
      <div class="body-h4 sa-p-t-25 sa-flex">
        <div class="body-item">
            <div>可用余额(元)</div>
            <div class="item-money sa-m-t-10 sa-flex">
                <span class="body-item-text">￥</span>
                0.00
            </div>
        </div>
        <div class="body-item sa-m-l-10">
            <div>待结算余额(元)</div>
            <div class="item-money sa-m-t-10 sa-flex">
                <span class="body-item-text">￥</span>
                0.00
                <span class="body-see sa-m-l-80">查看原因</span>
            </div>
        </div>
      </div>
      <div class="body-h2 sa-p-t-18 sa-flex">提现方式</div>
      <el-radio-group v-model="selectedValue">
        <div class="body-h3 sa-p-t-18 sa-flex">
          <div class="card">
            <div class="card-body">
              <div class="body-text">
                  <el-radio label="zfb" class="body-radio">支付宝</el-radio>
                  <div class="sa-p-l-20">自动到账</div>
                  <div class="sa-p-l-20">支付宝账户 | 张大力</div>
              </div>
              <img class="card-img" src="./img/zfb.png" />
            </div>
          </div>
          <div class="card sa-m-l-15" style="background:#FFFFFF">
            <div class="card-body">
              <div class="body-text">
                  <el-radio label="wx" class="body-radio" disabled>微信零钱</el-radio>
                  <div class="sa-p-l-20">暂不支持</div>
              </div>
              <img class="cardwx" src="./img/wx.png" />
            </div>
          </div>
          <div class="card sa-m-l-15" style="background:#FFFFFF">
            <div class="card-body">
              <div class="body-text">
                  <el-radio label="card" class="body-radio" disabled>银行卡转账</el-radio>
                  <div class="sa-p-l-20">暂不支持</div>
              </div>
              <img class="cardcard" src="./img/card.png" />
            </div>
          </div>
        </div>
      </el-radio-group>
      <div class="body-h2 sa-p-t-18 sa-flex">提现金额</div>
      <el-input style="width:344px;background: #F5F5F5;" class="sa-m-t-18 sa-flex"></el-input>
      <div class="body-h2 sa-p-t-18 sa-flex">
        <el-checkbox v-model="checked">我已知晓：提现资金最多50000，00元；每次收取1%手续费；每月最多提现100次；到账结果查收对应渠道服务通知。</el-checkbox>
      </div>
      
    </div>
    <div class="basic-bottom sa-m-t-25">
      <div class="bottom-flex sa-flex" @click="routerGo('/seller/admin/info/accountstatement')">
        <div class="bottom-item"></div>
        <div class="bottom-text">账户流水</div>
      </div>
      <div class="bottom-flex sa-flex">
        <div class="bottom-item"></div>
        <div class="bottom-text">交易密码</div>
      </div>
      <div class="bottom-flex sa-flex">
        <!-- <div class="bottom-item"></div>
        <div class="bottom-text">提现记录</div> -->
      </div>
      <div class="bottom-flex sa-flex"></div>
    </div>
  </el-main>
</template>

<script setup>
  import { reactive, onMounted, ref } from 'vue';
  import {api} from '../info.service'
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import {useRouter} from 'vue-router';

  const router = useRouter();
  const state = reactive({
    data: {},
  });
  const selectedValue = ref('zfb')

  onMounted(() => {
    getData();
  });

  const getData = async () => {
    let {error,data} = await api.basic.info()
    console.log('data',data)
    if (error === 0) {
      data.rate = '5.0'
      state.data = data
    }
  };
  const copyShopId = async () => {
  try {
    await navigator.clipboard.writeText('19745211');
  } catch (error) {
    console.error('复制失败:', error);
  }
};
function routerGo(data) {
    router.push({
      path: data,
      query: {
        type: 'edit',
        id:data.id
      },
    });
  }
</script>

<style lang="scss" scoped>
.basic-config{
   background-color: #EBECF8 !important;
  .basic-config-title{
    font-family: Source Han Sans;
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #202020;
  }
  .basic-body{
    width: 1561px;
    border-radius: 20px;
    padding: 0px 25px;
    padding-bottom: 30px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
    .body-title{
        font-family: Source Han Sans;
        font-size: 20px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #080808;
    }
    .body-h2{
        font-family: Source Han Sans;
        font-size: 18px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #080808;
        align-items:flex-start;
    }
    .body-h3{
        width: 90%;
        display: flex;
        justify-content: space-between;
        .body-item{
            font-family: Source Han Sans;
            font-size: 50px;
            font-variation-settings: "opsz" auto;
            font-feature-settings: "kern" on;
            color: #3929EA;
            .item-text{
                font-size: 36px;
            }
        }
        .body-btn{
            width: 107px;
            height: 41px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #3868FA;
            font-family: Source Han Sans;
            font-size: 16px;
            font-weight: 500;
            font-variation-settings: "opsz" auto;
            font-feature-settings: "kern" on;
            color: #FFFFFF;
        }
    }
    .body-h4{
        font-family: Source Han Sans;
        font-size: 16px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #080808;
        .body-item{
            min-width: 167px;
            .item-money{
                font-size: 18px;
                .body-item-text{
                    font-size: 16px;
                }
                .body-see{
                    font-family: Source Han Sans;
                    font-size: 14px;
                    font-variation-settings: "opsz" auto;
                    font-feature-settings: "kern" on;
                    color: #3868FA;
                }
            }
        }
    }
  }
  .basic-bottom{
    display: flex;
    width: 1561px;
    height: 74px;
    border-radius: 20px;
    padding: 16px 32px;
    padding-bottom: 10px;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
    .bottom-flex{
      width: 25%;
      display: flex;
      .bottom-item{
        width: 47px;
        height: 48px;
        background: #D8D8D8;
        border-radius: 50%;
      }
      .bottom-text{
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #080808;
        margin-left: 11px;
      }
    }
  }
}



.el-rate{
      --el-rate-icon-margin: 1px;
}
.card{
  width: 278px;
  height: 117px;
  border-radius: 10px;
  opacity: 1;
    
  /* 自动布局 */
  display: flex;
    
  background: #EFF3F8;
    
  box-sizing: border-box;
  border: 1px solid #CCCCCC;
  padding-left: 18px;
  .card-body{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 3px;
    padding-right: 3px;
    .body-text{
      font-family: Source Han Sans;
      font-size: 14px;
      font-variation-settings: "opsz" auto;
      font-feature-settings: "kern" on;
      color: #B3B3B3;
      .body-radio{
        font-family: Source Han Sans;
        font-size: 16px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #080808;
        display: flex;
        align-items: center;
      }
    }
    .card-img{
      width: 61px;
      height: 61px;
    }
    .cardwx{
      width: 68px;
      height: 52px;
    }
    .cardcard{
      width: 63px;
      height: 39px;
      margin-top: 8px;
      margin-right: 8px;
    }
  }
}
.el-radio{
  font-size:16px
}
.el-radio__label{
  font-size:16px !important;
}
// .el-rate .el-rate__icon{
//   margin-right: 3px !important;
// }
</style>
